<template>
	<view class="navBox" :style="{backgroundImage:'url('+image+')'}">
		<view :style="{height:statusBarHeight+'px'}"></view>
		<view
		class="flex"
			:style="{height:navBarHeight+'px',width:'100%',lineHeight:navBarHeight+'px',textAlign: 'center'}">
			 <!-- 这里写自定义内容 -->
			<view style="color: #ffffff;">
				个人中心
			</view>
		</view>
		<!-- 需要添加占位符高度  状态栏高度+导航栏高度（否则下面tab会塌陷）-->
		<view :style="{height: 10+'px'}"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				image:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201807%2F19%2F20180719150645_XJUNe.thumb.400_0.gif&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670907612&t=cc2c8050e60a0a620aab98acdfcf989b',
				statusBarHeight: 20,
				/* 状态栏高度 */
				navBarHeight: 45,
				/* 导航栏高度 */
				windowWidth: 375,
				/* 窗口宽度 */
				/* 设定状态栏默认高度 */
			}
		},
		onLoad() {
			
		},
		mounted() {
			// 获取手机系统信息
			const info = uni.getSystemInfoSync()
			// 设置状态栏高度（H5顶部无状态栏小程序有状态栏需要撑起高度）
			this.statusBarHeight = info.statusBarHeight
			this.windowWidth = info.windowWidth
			// 除了h5 app mp-alipay的情况下执行
			// #ifndef H5 || APP-PLUS || MP-ALIPAY
			// 获取胶囊的位置
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			// (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏内的高度) = 导航栏的高度
			this.navBarHeight = (menuButtonInfo.bottom - info.statusBarHeight) + (menuButtonInfo.top - info.statusBarHeight)
			this.windowWidth = menuButtonInfo.left
			// #endif
		},
		methods: {
		
		}
	}
</script>

<style lang="scss" scoped>
.navBox{
	width: 100%;
	height: 440rpx;
    background-size: 100% 100%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	opacity: 0.7;
	z-index: 999;
}

</style>
